@import "../../sassmixins/mixins";

html {
  height: 100%;
  //overflow: hidden;
}

body {
  height: 100%;
  width: 10rem;
  .outer {
    background-image: url("../image/bg.jpg");
    background-size: 100% 100%;
    font-size: 1rem;
    min-height: 100%;
    overflow: hidden;
    width: 10em;
    position: relative;
    min-width: 10rem;
    .container {
      background-image: url("../image/all.png");
      background-size: 100% 100%;
      @include size(px2em(750px), px2em(1206px));
      @include center-block;
      position: relative;

      .word {
        position: absolute;
        top: px2em(260px);
        width: 10em;
        transform: rotate(-9deg);
        -webkit-transform: rotate(-9deg);

        > div {
          font-size: px2em(28px);
          line-height: 1.4;
          color: #ffffff;
          text-align: center;
          > span {
            color: #ff0000;
            font-weight: bold;
          }
        }
      }

      .jd-5 {
        background-image: url("../image/jd5.png");
        background-size: 100% 100%;
        @include size(px2em(150px), px2em(118px));
        position: absolute;
        display: none;

        &.p-1 {
          display: block;
          top: px2em(480px);
          left: px2em(315px);
        }

        &.p-2 {
          display: block;
          top: px2em(447px);
          left: px2em(499px);
        }

        &.p-3 {
          display: block;
          top: px2em(460px);
          left: px2em(130px);
        }
      }

      .jd-30 {
        background-image: url("../image/jd30.png");
        background-size: 100% 100%;
        @include size(px2em(167px), px2em(118px));
        position: absolute;
        display: none;

        &.p-1 {
          display: block;
          top: px2em(480px);
          left: px2em(300px);
        }

        &.p-2 {
          display: block;
          top: px2em(454px);
          left: px2em(482px);
        }

      }

      .lxx {
        background-image: url("../image/lxx.png");
        background-size: 100% 100%;
        @include size(px2em(201px), px2em(290px));
        position: absolute;
        display: none;

        &.p-1 {
          display: block;
          top: px2em(366px);
          left: px2em(281px);
        }
      }

      .boll {
        background-image: url("../image/word.png");
        background-size: 100% 100%;
        @include size(px2em(132px), px2em(135px));
        position: absolute;
        top: px2em(321px);
        left: px2em(476px);
      }

      .input {
        @include size(px2em(355px), px2em(65px));
        border-radius: px2em(6px);
        position: absolute;
        left: px2em(196px);
        overflow: hidden;

        input {
          margin: 0;
          @include box-sizing;
          display: block;
          @include square(100%);
          border-radius: 5px;
          font-size: px2em(36px);
          padding: px2em(4px) px2em(8px);
          text-align: center;
          color: #000000;
          font-weight: bold;

          &::-webkit-input-placeholder {
            color: #cacaca;
            font-weight: bold;
          }
        }

        &.name {
          top: px2em(748px);
        }

        &.phone {
          top: px2em(836px);
        }
      }

      .must {
        position: absolute;
        left: px2em(569px);

        span {
          font-size: px2em(34px);
          color: #ffd990;
          line-height: 1;
          display: block;
        }

        &.na {
          top: px2em(767px);
        }

        &.ph {
          top: px2em(857px);
        }
      }

      .next {
        background-image: url("../image/next.png");
        background-size: 100% 100%;
        @include size(px2em(373px), px2em(93px));
        position: absolute;
        left: px2em(196px);
        top: px2em(987px);
      }
    }
  }
}

.dialog {
  position: fixed;
  @include square(100%);
  background-image: url("../image/share-bg.png");
  top: 0;
  left: 0;
  display: none;

  &.success {
    .word {
      background-image: url("../image/success.png");
      background-size: 100% 100%;
      @include size(10rem, px2rem(478px));
      position: relative;
      top: 25%;
    }
  }

  &.fail {
    .word {
      background-image: url("../image/error.png");
      background-size: 100% 100%;
      @include size(10rem, px2rem(290px));
      position: relative;
      top: 35%;
    }
  }
}

.click-area {
  position: absolute;
  &.page {
    width: px2em(447px);
    height: px2em(80px);
    left: px2em(145px);
    bottom: px2em(37px);
  }
  &.success {
    width: px2rem(500px);
    height: px2rem(172px);
    top: px2rem(333px);
    left: px2rem(145px);
  }
}